<template>
  <div>
    <v-header ref="header-view"
      :search-show="true"
      @cache-search="cacheSearch"
      @show-cache-search="showCacheSearch"
      @click-search="clickSearch"
      :backShow="backShow"
      :head-text="title"
      placeholder="输入您要查找成长值的商户名"
      :isFixed="isFixed"></v-header>
    <search-growth
      v-if="!growthSearch"
      :search-names="searchNames"
      @click-search="clickSearch"></search-growth>
    <template v-if="!noData">
      <div
        v-infinite-scroll="loadData"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <growth-item
          v-for="(item, index) in growthData"
          :photo-ratio="photoRatio"
          :growth-data="growthData"
          :max-exp="maxExp"
          :item="item"
          :key="index"></growth-item>
      </div>
      <div class="loading-box" v-if="moreInfo">
        <list-loading @clickEvent="loadData" :noMoreCoupon="noMore"></list-loading>
      </div>
      <div class="lastInfoMore" v-if="!moreInfo" v-show="growthData.length>3">没有更多</div>
    </template>
    <div class="growth-empty" v-else-if="noData">
      <img src="../../../images/growth-zero.png" alt="">
    </div>
  </div>
</template>

<script>
import VHeader from 'src/pages/home/nav.vue'
import ListLoading from '../../../componentes/global/listLoading.vue'
import * as types from '../../../vuex/types.js'
import { mapState } from 'vuex'
import {growthList} from '../../../service/getData3.js'
import GrowthItem from './item.vue'
import SearchGrowth from './search.vue'

export default {
  components: {VHeader, SearchGrowth, GrowthItem, ListLoading},
  data: () => ({
    hasMessage: false,
    noMore: true,
    noData: true,
    growthSearch: true,
    loading: true,
    growthData: [],
    currentPage: 0,
    totalPage: 0,
    serVal: '',
    photoRatio: '',
    moreInfo:true,
    isFixed: false,
    backShow: true,
    title: '我的成长值'
  }),
  computed: {
    ...mapState({
      userInfo:state => state.user.userInfo,
      searchNames: state => state.growth.nameList
    }),
    maxExp: function() {
      let value = this.$route.params.max
      return value;
    }
  },
  methods: {
    //监听滚动事件
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      if (scrollTop >= 50) {
        this.isFixed = true
      } else if (scrollTop <= 0) {
        this.isFixed = false
      }
    },
    showCacheSearch(type) { // 显示搜索功能
      this.title = ''
      this.backShow = false
      // 清空数据
      this.growthData = [];
      this.noData = false
      if (type === 'search') {
        // 移除数据组件和加载条 显示搜索框
        this.growthSearch = false;
      }
    },
    clickSearch(value, type) {
      this.growthData = []
      this.currentPage = 0
      this.totalPage = 0
      if (type === 'cache') { // 从搜索过的值里查询
        this.$refs['header-view'].value = value
      }
      if (value) {
        // 判断传来的值是否存在VueX里
        // let Repeat = this.searchNames.indexOf(value)
        // if (Repeat === -1){
           this.$store.commit('cacheName',value);
        // }
        // 显示数据（发请求）
        this.serVal = value.trim();
        this.loadData()
        this.growthSearch = true
      }
    },
    cacheSearch() { // 取消搜索
      this.backShow = true
      this.title  = '我的成长值'
      this.noData = false
      this.growthSearch = true
      this.growthData = []
      this.currentPage = 0;
      this.totalPage = 0;
      this.serVal = ''
      if (!this.noData && this.growthSearch) {
        this.loadData()
      } else {
        this.noData = false
        this.growthSearch = true
      }
      this.$store.commit(types.HEAD_TEXT,"我的成长值");
      this.$store.commit(types.HEAD_BACK_ICON,true);
    },
    loadData() {
      let usrId = this.userInfo.usrId
      this.noMore = false

      growthList({
          currentPage: this.currentPage + 1,
          usrId,
          mchtName: this.serVal
        }).then(res => {
          this.noMore = true
          if (res.content) {
            if (res.content.list.length<10) {
              this.moreInfo=false
            } else {
              this.moreInfo=true;
            }
            let list = res.content.list;
            let maxValue = this.maxExp * 1.5
            list.forEach(item => {
              item.recorded = (item.exp/maxValue).toFixed(2) * 100 + '%'
            })
            // 头像占刻度的百分比
            let clientWidth = document.body.clientWidth
            this.photoRatio = (36/clientWidth).toFixed(2) * 100 + '%'

            this.growthData = this.growthData.concat(list)
            this.totalPage = res.content.total
            if (list.length === 10) {
              this.loading = false
            }
            // 当首次加载页面没数据时显示的图片
            if (this.currentPage + 1 === 1 && this.growthData.length === 0) {
              this.noData = true
            }
            if (this.totalPage >= this.currentPage + 1) {
              this.currentPage += 1;
            }
          }
      })
    }
  },
  created() {
    // 监视滚动
    window.addEventListener('scroll', this.handleScroll);
  },
  mounted() {
    this.loadData()
    this.noData = false
    this.$store.commit(types.HEAD_TEXT,"我的成长值");
    this.$store.commit(types.HEAD_BACK_ICON,true);
  }
}
</script>

<style lang="scss" scoped>

</style>
